<template>
  <div class="container">
    <!-- 操作栏 -->
    <Header @refresh="refresh" />
    <div class="page-main">
      <div class="page-main-query all-search">
        <FilterBar>
          <template #left>
            <el-input class="input" placeholder="搜索认证名称" v-model="query.name" @input="queryChange" />
            <el-select v-model="query.authType" placeholder="请选择接口类型" @change="queryChange" clearable>
              <el-option label="RESTFUL_API" :value="0" />
              <el-option label="JAVA定制" :value="1" />
            </el-select>

            <el-button class="filterbar-button" type="primary" @click="reset">重置</el-button>
          </template>
          <template #right>
            <el-button type="primary" @click="handleCreate">新增认证</el-button>
          </template>
        </FilterBar>
      </div>
      <!-- 表格 -->
      <DynamicTable class="table-container" :total="total" v-model:current="page.current" v-model:size="page.size"
        :data="list" :columns="tableColumns" @pagination="getList" />
    </div>

    <!-- 新增/编辑 -->
    <EditDrawer v-model="showEdit" :type="editType" :item="currentItem" @update-list="refresh" />
  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive } from "vue";
import Header from "@/components/Header.vue";
import DynamicTable from "@/components/DynamicTable";
import FilterBar from "@/components/FilterBar.vue";
import EditDrawer from "./components/EditDrawer.vue";
import { useListManage } from "@/hooks";
import { Search } from "@element-plus/icons-vue";
import { getAuthPageList, deleteAuth, getAuthDetail } from "@/api/adaptation";
import { useRouter } from "vue-router";
import {parseTime} from "@/utils"
export default defineComponent({
  name: "AdaptationAuth",
  components: {
    Header,
    DynamicTable,
    FilterBar,
    EditDrawer,
  },
  setup(props, { emit, slots }) {
    const query = reactive({
      search: null,
    });
    let {
      page,
      list,
      total,
      height,
      currentItem,
      editType,
      showEdit,
      refresh,
      listLoading,
      handleUpdate,
      handleDelete,
      getList,
      queryChange,
      showDetail,
      handleDetail,
      reset
    } = useListManage(props, emit, {
      getItems: getAuthPageList,
      query: query,
      getDetail: getAuthDetail,
      deleteItem: deleteAuth,
      //   tableHeight: document.body.offsetHeight - 220
    });

    const tableColumns = ref([
      {
        label: "认证名称",
        key: "name",
        minWidth: "200px",
      },
      {
        label: "接口类型",
        key: "authType",
        minWidth: "100px",
        render: (h, {row}) => (
          <span>{row.authType == 0?'RESTFUL_API':'JAVA定制'}</span>
        )
      },
      {
        label: "备注",
        key: "memo",
        minWidth: "200px",
      },
      {
        label: "创建时间",
        minWidth: "150px",
        render: (h, {row}) => (
          <span>{parseTime(row.createDate)}</span>
        )
      },
      {
        label: "操作",
        fixed: "right",
        width: "200px",
        render: (h, params) => (
          <span>
            {
              <el-button
                type="text"
                size="small"
                onClick={() => {
                  localStorage.setItem('authDetailId', params.row.id)
                  router.push(`/system/auth/detail`)
                }}
              >
                详情
              </el-button>
            }
            {
              <el-button
                type="text"
                size="small"
                onClick={() => {
                  router.push(`/system/auth/update/${params.row.id}`)
                }}
              >
                编辑
              </el-button>
            }
            {
              <el-popconfirm
                title="确定删除吗？"
                confirmButtonText="好的"
                cancelButtonText="不用了"
                onConfirm={() => handleDelete(params.row)}
                v-slots={{
                  reference: () => (
                    <el-button type="text" size="small">
                      删除
                    </el-button>
                  ),
                }}
              />
            }
          </span>
        ),
      },
    ]);
    const router = useRouter()
    const handleCreate = () => {
      router.push('/system/auth/create')
    }
    onMounted(() => {
      getList();
    });

    return {
      // 列表数据
      page,
      list,
      total,
      Search,
      listLoading,
      query,
      tableColumns,
      queryChange,
      getList,
      // 编辑数据
      editType,
      handleCreate,
      currentItem,
      showEdit,
      refresh,
      reset
    };
  },
});
</script>
<style scoped>
.filterbar-button {
  margin-left:10px;
}
</style>